<template>
    <div class="common-layout">
        <el-container>
            <el-header></el-header>
            <el-main>
                <div style="margin: 0 auto;width: 900px">
                    <router-link to="/personal" style="text-decoration-line: none;">
                        <h5 style="margin-top: 0px">&lt; 返回</h5>
                    </router-link>
                </div>
                <div class="OrderShow" v-for="item1 in orders" :key="item1.id" style="margin-top: 35px;box-shadow: 5px 0 6px #99a9bf ">
                    <h4 style="margin: 3px 0px 0px 60px">{{item1.store.name}}</h4>
                    <div v-for="item2 in item1.orderItems" :key="item2.id">
                        <el-row>
                            <el-col :span="3"></el-col>
                            <el-col :span="2">
                                <el-image :src="`http://127.0.0.1:8081/product/${item2.product.picture }`" style="width: 200px;height: 200px; margin-top: 20px"></el-image>
                            </el-col>
                            <el-col :span="5"></el-col>
                            <el-col :span="7">
                                <h3>名称：{{item2.product.title}}</h3>
                                <h5 style="margin-top: -10px">数量：{{item2.number}}</h5>
                                <h5 style="margin-top: -10px">实付款：{{item1.total}}</h5>
                                <el-row>
                                    <el-col :span="9">
                                        <span>假一赔十</span>
                                    </el-col>
                                    <el-col :span="10" style="margin-left: -28px">
                                        <span>七天无理由退货</span>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </div>

                    <el-row style="margin-top: -74px">
                        <el-col :span="10"></el-col>
                        <el-col :span="5">
                            <h5>地址信息：{{item1.address.address}}</h5>
                            <h5>姓名：{{item1.address.name}}</h5>
                            <h5>联系方式：{{item1.address.telephone}}</h5>
                        </el-col>
                        <el-col :span="3"></el-col>
                    </el-row>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<style scoped>
.el-header {
    height: 60px;
    background-color: #545c64;
    position: relative;
}
.OrderShow{
    width: 900px;
    background-color: snow;
    margin: 0 auto;
    padding: 10px 0px;
}
span{
    color: orange;
    font-size: 13px;
    border: 1px solid orange;
}
</style>
<script setup>
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting, User,
} from '@element-plus/icons-vue'

import {onMounted, ref, reactive, toRaw, computed} from 'vue'
import {ElMessageBox, ElTable} from 'element-plus'
import axios from 'axios'
import router from '../router/index.js'
import {ElMessage} from "element-plus";
import orderApi from '../api/order.js'
import {useRoute} from "vue-router";

onMounted(() =>{
    orderShows()
})
const orders = ref([])
const orderShows = async() =>{
    const res = await orderApi.queryByUid()
    console.log(res.data)
    orders.value = res.data
    console.log(orders.value)
}

</script>